import { computed, reactive, ref } from 'vue';

export function useTargetIndex(initialIndex) {
  const targetIndex = ref(initialIndex);

  // select当前选中项
  function setTargetIndex(newIndex) {
    targetIndex.value = Number(newIndex);
  }

  return [targetIndex, setTargetIndex];
}

export function useRightListData(initialData, checkedData) {
  const rightListData = ref(initialData);

  // 往右侧列表添加数据
  function addRightListData(leftData) {
    rightListData.value = [...rightListData.value, ...leftData];
    checkedData.left = []; // 清空左侧临时部分
  }

  function removeRightListData(newData) {
    newData.forEach((v) => {
      rightListData.value = rightListData.value.filter((item) => item.id !== v.id);
    });
    checkedData.right = []; //当数据放入左侧列表 清空临时列表的右侧
  }

  return [rightListData, addRightListData, removeRightListData];
}

// 拖拽单个元素
export function useDragedItem(params) {
  const dragedItem = ref(null);

  function setDragedItem(item) {
    dragedItem.value = item;
  }
  return { dragedItem, setDragedItem };
}

// 计算函数
export function useComputedData(data, targetIndex, rightListData, checkedData) {
  const leftTitle = computed(() => data[targetIndex.value].title);

  // 左侧列表数据
  const leftListData = computed(() => {
    const { data: currentData } = data[targetIndex.value]; //选中的数据
    console.log('currentData', currentData);
    return currentData.filter((v) => {
      //过滤右边的rightListData
      if (!rightListData.value.find((v2) => v.id === v2.id)) return v;
    });
  });

  // 判断穿梭左右按钮是否被禁用
  const transferButtonDisabled = computed(() => ({
    left: checkedData.right.length === 0,
    right: checkedData.left.length === 0,
  }));

  // 判断全选栏状态
  const checkedAllBool = computed(() => ({
    left: checkedData.left.length === leftListData.value.length && leftListData.value.length !== 0,
    right: checkedData.right.length === rightListData.value.length && rightListData.value.length !== 0,
  }));

  return {
    leftTitle,
    leftListData,
    checkedAllBool,
    transferButtonDisabled,
  };
}

// 选择数据
export function useCheckedData() {
  const checkedData = reactive({
    left: [],
    right: [],
  });

  function addCheckData(leftOrRight, item, isAll) {
    if (isAll) {
      switch (leftOrRight) {
        case 'left':
          console.log('item', item);
          checkedData.left = item;
          break;
        case 'right':
          checkedData.right = item;
          break;
      }
    } else {
      switch (leftOrRight) {
        case 'left':
          checkedData.left.push(item);
          break;
        case 'right':
          checkedData.right.push(item);
          break;
      }
    }
  }

  function removeCheckData(leftOrRight, item, isAll) {
    if (isAll) {
      switch (leftOrRight) {
        case 'left':
          checkedData.left = [];
          break;
        case 'right':
          checkedData.right = [];
          break;
      }
    } else {
      switch (leftOrRight) {
        case 'left':
          checkedData.left = checkedData.left.filter((v) => v.id !== item.id);
          break;
        case 'right':
          checkedData.right = checkedData.right.filter((v) => v.id !== item.id);
          break;
      }
    }
  }

  return { checkedData, addCheckData, removeCheckData };
}
